import React from 'react';
import { Modal, Button, Input, Form, Checkbox, Table, Divider } from 'antd';
import './index.less';

import AddModal from './components/AddModal';
// const layout = {
// 	labelCol: { span: 12 },
// 	wrapperCol: { span: 12, offset: 2 },
// };
// const tailLayout = {
// 	wrapperCol: { offset: 8, span: 16 },
// };

function mergeCells(dataSource, type) {
	const objResult = {};
	const arr = [];   // 将数组重合成三个数组
	const arr1 = [];  // 每个组的长度
	const arr2 = [0]; // 每组的位置
	const arrResult = []; 
	let len = 0;
	let typeResult = [];
	dataSource.forEach(val => {
		for (const i in val) {
			if (i === type) {
				typeResult = val[i];
			}
		}
		const objArray = objResult[typeResult] || [];
		objArray.push(val);
		objResult[typeResult] = objArray;
	});

	for (const i in objResult) {
		arr.push(objResult[i])
	}
	
	arr.forEach((val, key) => {
		arr1.push(val.length);
		len += val.length;
		arr2.push(len);
	})
	arrResult[0] = arr1;
	arrResult[1] = arr2;
	return arrResult
}

const data = [
	{
		key: '1',
		name: 'John Brown',
		age: 42,
		tel: '0571-22098909',
		phone: 18889898989,
		address: 'New York No. 1 Lake Park',
	},
	{
		key: '2',
		name: 'John Brown',
		tel: '0571-22098333',
		phone: 18889898888,
		age: 32,
		address: 'London No. 1 Lake Park',
	},
	{
		key: '3',
		name: 'John Brown',
		age: 32,
		tel: '0575-22098909',
		phone: 18900010002,
		address: 'Sidney No. 1 Lake Park',
	},
	{
		key: '4',
		name: 'Jim Red',
		age: 18,
		tel: '0575-22098909',
		phone: 18900010002,
		address: 'London No. 2 Lake Park',
	},
	{
		key: '5',
		name: 'Jake White',
		age: 18,
		tel: '0575-22098909',
		phone: 18900010002,
		address: 'Dublin No. 2 Lake Park',
	},
	{
		key: '6',
		name: 'Ben Alice',
		age: 32,
		tel: '0571-22098909',
		phone: 18889898989,
		address: 'New York No. 1 Lake Park',
	},
	{
		key: '7',
		name: 'Jim Green',
		tel: '0571-22098333',
		phone: 18889898888,
		age: 42,
		address: 'London No. 1 Lake Park',
	},
	{
		key: '8',
		name: 'Joe Black',
		age: 32,
		tel: '0575-22098909',
		phone: 18900010002,
		address: 'Sidney No. 1 Lake Park',
	},
	{
		key: '9',
		name: 'Jim Redsss',
		age: 18,
		tel: '0575-22098909',
		phone: 18900010002,
		address: 'London No. 2 Lake Park',
	},
	{
		key: '10',
		name: 'Peter White',
		age: 18,
		tel: '0575-22098909',
		phone: 18900010002,
		address: 'Dublin No. 2 Lake Park',
	},
];

const columns = [
	{
		title: 'Name',
		dataIndex: 'name',
		render: (value, row, index) => {
			// return <a>{text}</a>;
			const obj = {
				children: value,
				props: {},
			};
			const arrResult = mergeCells(data, 'name');
			for (let i = 0; i < arrResult[0].length; i++) {
				if (index === arrResult[1][i]) {
					obj.props.rowSpan = arrResult[0][i];
				}
				if (index > arrResult[1][i] && index < arrResult[1][i + 1]) {
					obj.props.rowSpan = 0;
				}
			}
			return obj;
		}
	},
	{
		title: 'Age',
		dataIndex: 'age',
	},
	{
		title: 'Home phone',
		dataIndex: 'tel',
	},
	{
		title: 'Phone',
		dataIndex: 'phone',
		// render: renderContent,
	},
	{
		title: 'Address',
		dataIndex: 'address',
		// render: renderContent,
	},
];





class FormTest extends React.Component {
	state = {
		visible: false,
		addModalVis: true
	}
	showModal = () => {
		this.setState({
			visible: true
		})
	}
	handleCancel = () => {
		this.setState({
			visible: false
		})
	}

	showAddModal = () => {

	}
	render() {

		return (
			<>
				<h1>antd表单Demo</h1>
				<Button type="primary" onClick={this.showModal}>
					Open Modal
                </Button>
				<Button type="primary" onClick={this.showAddModal}>
					打开表单布局框
				</Button>
				<Table
					columns={columns}
					dataSource={data}
					bordered
				// scroll={{ y: '400px' }}
				/>

				{
					this.state.addModalVis && (
						<AddModal 
							visible={this.state.addModalVis}
						/>
					)
				}
			</>
		)
	}
}

export default FormTest;